<template>
  <div class="ZYF-station">
    <div class="col6-class">
      <h2 class="h3">
        烟气站查询
        <a-icon
          type="rollback"
          style="font-size:30px;float:right"
          @click="goBackFn"
          v-show="!isShow"
        />
      </h2>
      <a-form-model
        :model="queryForm"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        :colon="false"
        v-show="isShow"
      >
        <a-form-model-item label="设备名称">
          <a-input v-model="queryForm.name" placeholder="请输入设备名称" allow-clear />
        </a-form-model-item>
        <a-form-model-item label="监测厂家">
          <a-select v-model="queryForm.monitorFactoryId" placeholder="请选择监测厂家" allow-clear>
            <a-select-option value="shanghai">一厂</a-select-option>
            <a-select-option value="beijing">二厂</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="监测地区">
          <a-select v-model="queryForm.monitorAreaId" placeholder="请选择监测地区" allow-clear>
            <a-select-option value="shanghai">1</a-select-option>
            <a-select-option value="beijing">2</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="地图绘制">
          <a-button class="icon-btnclass" @click="dowrGraphics('circle')" title="点击绘制圆">
            <img src="@/assets/public/地图绘制1.png" />
          </a-button>
          <!-- <a-button class="icon-btnclass" @click="dowrGraphics('circle')" title="点击绘制三角形">
                            <img src="@/assets/public/地图绘制2.png" />
          </a-button>-->
          <a-button class="icon-btnclass" @click="dowrGraphics('polygon')" title="点击绘制多边形">
            <img src="@/assets/public/地图绘制3.png" alt />
          </a-button>
          <a-button class="icon-btnclass" @click="()=>{mouseTool.close(true);queryForm.geom=''}">
            <img src="@/assets/public/地图绘制4.png" alt />
          </a-button>
        </a-form-model-item>
        <div class="form-item">
          <a-button type="primary sousuo" @click="onSubmit">搜索</a-button>
          <a-button type="reset">清空条件</a-button>
        </div>
      </a-form-model>
      <div class="list-box__shui" v-show="!isShow">
        <ul class="listB">
          <li
            class="list-child"
            v-for="(v,i) in dataList"
            :key="i"
            @click="selectFn(v)"
            :class="{'select-box':v.id == isSelect}"
          >
            <div class="img-box">
              <img v-if="v.id == isSelect" src="@/assets/public/水站图标1.png" alt="我是一张图片" />
              <img v-else src="@/assets/public/水站图标2.png" alt="我是一张图片" />
            </div>
            <div class="text-box">
              <div class="text-box__p" :class="{'select-box__p':v== isSelect}">
                <p class="name-p hidden1">{{v.name}}</p>
                <!--                                <p class="dizhi-p hidden1" style="text-align:right;">江苏-南京</p>-->
              </div>
              <ul class="numnew" :class="{'select-numnew':v.id== isSelect}">
                <li class="numnew-child hidden1">设备标识(MN):{{v.equipmentSequence}}</li>
                <li class="numnew-child hidden1">最新数据时间:{{v.datetime}}</li>
              </ul>
            </div>
          </li>
        </ul>
        <div class="content-bottom clearfix">
          <div class="page-box">
            <a-pagination
              :show-total="total => `共${total}条记录`"
              v-model="queryForm.current"
              :total="total"
              :defaultPageSize="queryForm.size"
              show-less-items
              :item-render="itemRender"
              @change="pagechangeFn"
              hideOnSinglePage
            />
          </div>
        </div>
      </div>
    </div>
    <div class="col16-class">
      <div class="map-boxclass">
        <el-amap class="amapContainer" :amap-manager="amapManager" :events="events" :center="center" :zoom="zoom" :vid="'amap-vue'"></el-amap>
      </div>
      <div class="widow-box" ref="infoWindow" v-show="isinfoWindow">
        <h3 class="h3">
          设备详细信息
          <a-icon class="guanbiicon" type="close-circle" @click="closeInfoWindow" />
        </h3>
        <ul>
          <li class="single">
            <p class="single-title">设备名称:</p>
            <p class="single-cent">{{details.name}}</p>
          </li>
          <li class="single">
            <p class="single-title">设备标识(MN):</p>
            <p class="single-cent">{{details.equipmentSequence}}</p>
          </li>
          <li class="single">
            <p class="single-title">创建时间:</p>
            <p class="single-cent">{{details.createTime}}</p>
          </li>
          <li class="single">
            <p class="single-title">最新数据时间:</p>
            <p class="single-cent">{{details.datetime}}</p>
          </li>
          <li class="single" v-for="(v,i) in details.equipmentAbnormalInfoList" :key="i">
            <p class="single-title">{{v.name}}:</p>
            <p class="single-cent">{{v.value}}({{v.unit?v.unit:"-"}})</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
let amapManager = new AMapManager(); // 新建生成地图画布
export default {
    name: "index",
    data() {
        let thet = this;
        return {
            isinfoWindow: false, //  是否显示窗口
            total: 0, // 设备总条数
            isSelect: "", // 是否选中
            isShow: true, // 是否显示列表
            labelCol: { span: 4 },
            wrapperCol: { span: 20 },
            queryForm: {
                name: "", // 设备名称
                equipmentType: "1", // 设备类型
                status: "", // 设备状态
                monitorAreaId: "", // 建测地区
                monitorFactoryId: "", // 建测工厂
                geom: "", // 坐标
                current: 1,
                size: 6,
                monitorType:"1"
            },
            amapManager,
            mapStyle: "amap://styles/39ba2088b6b8fc67184833f73cceab4d",
            zoom: 10,
            map: "",
            center: [118.4643, 32.0238],
            events: {
                init(o) {
                    lazyAMapApiLoaderInstance.load().then(() => {
                        thet.initPage();
                    });
                },
            },
            mouseTool: "", // 鼠标画图实例
            dataList: [], // 查询出来的数组
            markerArr: [], // 点标记数组
            clickedMarker: "", // 已选中的点标记
            details: {}, //  选中的数据对象
        };
    },
    methods:{
    // 点击按钮绘制多边形
    dowrGraphics(type) {
      if (this.queryForm.geom) {
        this.$message.info("已有选取区域！");
        return;
      }
      if (type == "polygon") {
        this.mouseTool.polygon();
      } else {
        this.mouseTool.circle();
      }
    },
    // 返回按钮
    goBackFn() {
      this.isShow = true;
      this.map.remove(this.markerArr);
      this.markerArr = [];
      this.dataList = [];
      this.queryForm.current = 1;
      this.isSelect = "";
      this.closeInfoWindow();
    },
    // 点击设备方法
    selectFn(data) {
      this.isSelect = data.id;
      this.markerArr.forEach((v) => {
        if (v.getExtData().id == this.isSelect) {
          if (this.clickedMarker) {
            this.clickedMarker.setIcon(
              new AMap.Icon({
                image: require("@/assets/public/空气站图标4.png"),
                size: new AMap.Size(28, 30), //图标大小
                imageSize: new AMap.Size(28, 30),
              })
            );
          }
          v.setIcon(
            new AMap.Icon({
              size: new AMap.Size(56, 69),
              image: require("@/assets/public/空气站图标3.png"),
              imageSize: new AMap.Size(56, 69),
              imageOffset: new AMap.Pixel(0, 0),
            })
          );
          this.clickedMarker = v;
          this.map.setCenter(v.getPosition());
        }
      });
      this.openinfoWindow(data);
      this.details = data;
    },
    // 搜索按钮获取数据
    onSubmit() {
      this.$api.postEquipmentFindByGeom(this.queryForm).then((res) => {
        if (res.data.data.length > 0) {
          this.dataList = res.data.data;
          this.dataList.forEach((v) => {
            v.createTime = moment(parseInt(v.createTime)).format(
              "YYYY/MM/DD HH:mm:ss"
            );
            if (v.equipmentAbnormalInfoList) {
              v.datetime = v.equipmentAbnormalInfoList[0].datetime
                ? moment(
                    parseInt(v.equipmentAbnormalInfoList[0].datetime)
                  ).format("YYYY/MM/DD HH:mm:ss")
                : "暂无数据";
            }
          });
          this.total = res.data.total;
          this.markerList();
          this.isShow = false;
        } else {
          this.$message.warning("查询不到数据！");
          return;
        }
      });
    },
    // 分页方法
    itemRender(current, type, originalElement) {
      // console.log(current, type, originalElement)
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      this.queryForm.current = page;
      this.onSubmit();
    },
    // 初始化地图点标记
    markerList() {
      this.map.remove(this.markerArr);
      this.dataList.forEach((v) => {
        let icon = new AMap.Icon({
          size: new AMap.Size(28, 30),
          image: require("@/assets/public/空气站图标4.png"),
          imageSize: new AMap.Size(28, 30),
          imageOffset: new AMap.Pixel(0, 0),
        });

        let marker = new AMap.Marker({
          position: new AMap.LngLat(v.x, v.y),
          icon: icon,
          title: v.title,
        });
        marker.setExtData({ id: v.id });
        AMap.event.addListener(marker, "click", (e) => {
          this.selectFn(v);
          this.openinfoWindow(v);
          this.clickedMarker = e.target;
        });
        this.markerArr.push(marker);
      });
      this.map.add(this.markerArr);
    },
    // 创建标签方法
    createInfoWindow(data) {
      this.isinfoWindow = true;
      return this.$refs.infoWindow;
    },
    // 打开标签方法
    openinfoWindow(data) {
      var position = new AMap.LngLat(data.x, data.y);
      this.map.panTo(position);
      this.infoWindow.setContent(this.createInfoWindow(data));
      this.infoWindow.open(this.map, position);
    },
    // 关闭窗口方法
    closeInfoWindow() {
      this.map.clearInfoWindow();
    },
  },

  mounted() {
    this.infoWindow = new AMap.InfoWindow({
      isCustom: true,
      anchor: "middle-left",
      offset: new AMap.Pixel(40, -10),
    });
    document
      .querySelector(".layout-content-main")
      .classList.add("none-background");
  },
  beforeRouteLeave(to, from, next) {
    document
      .querySelector(".layout-content-main")
      .classList.remove("none-background");
    next();
  },
};
</script>

<style scoped lang="scss">
// 信息窗体样式
.widow-box {
  width: 350px;
  height: auto;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background: rgba(18, 90, 48, 0.801);
  position: relative;
  .guanbiicon {
    color: #10a98e;
    font-size: 24px;
    float: right;
    // position: absolute;
    // right: 20px;
    // top: 20px;
  }
  .single {
    width: 100%;
    height: auto;
    display: flex;
    color: rgba(255, 255, 255, 0.7);
    .single-title {
      width: 35%;
      // text-align: right;
    }
    .single-cent {
      width: 65%;
    }
  }
}
// 信息窗体样式完
.ZYF-station {
  width: 100%;
  height: 100%;
  padding: 1%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;

  .col6-class {
    width: 32%;
    height: 100%;
    border: 1px solid #10a98e;
    padding: 20px 30px;
    box-sizing: border-box;
    .icon-btnclass {
      background-color: #2b4341;
      border-color: #2b4341;
      padding: 0 10px;
      margin-right: 10px;
      img {
        width: 16px;
      }
    }
    .form-item {
      position: absolute;
      bottom: 5%;
    }
  }
  .col16-class {
    width: 66%;
    height: 100%;
    border: 1px solid #10a98e;
    box-sizing: border-box;
    position: relative;
  }

  .sousuo {
    letter-spacing: 7px;
    color: rgba(0, 0, 0, 0.7);
    margin-right: 10px;
  }

  /* 搜索列表 */
  .list-box__shui {
    width: 100%;
    height: calc(100% - 50px);
    .listB {
      width: 100%;
      height: 94%;
      display: flex;
      flex-direction: column;
    }
    .list-child {
      width: 100%;
      height: 15%;
      padding: 24px;
      margin-bottom: 3%;
      box-sizing: border-box;
      background-color: #1a3732;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      border-radius: 8px;
      box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.5);
      &:last-child {
        margin-bottom: 0;
      }
      .img-box {
        width: 20%;
        display: flex;
        justify-content: center;
        align-items: center;
        > img {
          width: 70%;
        }
      }
    }
  }

  .text-box {
    width: 80%;
    height: 110%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .numnew {
    height: 70%;
    color: #207064;
    font-size: 14px;
    font-weight: 600;
    line-height: 16px;
    // display: flex;
    // flex-wrap: wrap;
    // justify-content: space-between;
    .numnew-child {
      line-height: 1.5;
      // text-align: center;
    }
  }
  .text-box__p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 18px;
    display: flex;
    .name-p {
      width: 65%;
    }
    .dizhi-p {
      width: 34%;
    }
  }

  /* 右侧地图样式 */
  .map-boxclass {
    width: 100%;
    height: 100%;
  }
  /* 选中样式 */
  .select-box {
    background: linear-gradient(#1e7151, #246369);
  }
  .select-box__p {
    color: #b5c739;
  }
  .select-numnew {
    color: #10c589;
  }
}
::v-deep .ant-form-item {
  margin-bottom: 12px;
}

::v-deep.ZYF-station .amap-logo {
  opacity: 0;
}
/* 分页 */
.content-bottom {
  margin-top: 16px;
  width: 110%;
}
::v-deep.ZYF-station .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}
</style>
